<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0;padding:0;}
        canvas{display:block;margin:50px auto;}
    </style>
</head>
<body>
    <canvas id="canvas">Browser does not support canvas!</canvas>
</body>
</html>
<script>
    var cans=document.getElementById("canvas");
    var ctx=cans.getContext("2d");
    cans.width=500;
    cans.height=500;
    cans.style.backgroundColor='#000';
    var r=cans.width/2-50;
    var speed=0.1;
    var stop=0;
    var lineSize=10;
    function draw(){
        stop=window.requestAnimationFrame(draw);
        ctx.clearRect(0,0,cans.width,cans.height);

        let rg=ctx.createRadialGradient(0,0,0,0,0,r/2);
        rg.addColorStop(0.1,"red");
        rg.addColorStop(0.3,"skyblue");
        rg.addColorStop(0.4,"orange");
        rg.addColorStop(0.5,"yellow");
        rg.addColorStop(0.6,"green");
        rg.addColorStop(0.7,"blue");
        rg.addColorStop(0.8,"pink");
        rg.addColorStop(1,"purple");

        ctx.save();
        ctx.beginPath();
        ctx.translate(cans.width/2,cans.height/2);
        ctx.strokeStyle="green";
        ctx.lineWidth=lineSize;
        ctx.arc(0,0,r,0,2*Math.PI,false);
        ctx.stroke();
        ctx.restore();

        ctx.save();
        ctx.beginPath();
        ctx.translate(cans.width/2,cans.height/2);
        ctx.fillStyle="skyblue";
        //ctx.fillStyle=rg;
        let y=r-speed;
        let x=Math.sqrt(r*r-y*y);
        let rad=Math.acos(y/r);
        ctx.arc(0,0,r-lineSize/2,Math.PI/2-rad,Math.PI/2+rad,false);
        ctx.moveTo(x,y);
        ctx.lineTo(-x,y);
        ctx.fill();
        ctx.restore();

        ctx.save();
        ctx.beginPath();
        ctx.font="62px Arial";
        ctx.textAlign="center";
        ctx.textBaseline="middle";
        ctx.fillStyle="#fff";
        ctx.fillText((speed/4).toFixed(0)+"%",cans.width/2,cans.height/2);
        ctx.fill();
        ctx.restore();

        ctx.save();
        ctx.beginPath();
        let lg=ctx.createLinearGradient(0,cans.height,cans.width,cans.height);
        lg.addColorStop(0.1,"skyblue");
        lg.addColorStop(0.3,"red");
        lg.addColorStop(0.4,"orange");
        lg.addColorStop(0.5,"yellow");
        lg.addColorStop(0.6,"green");
        lg.addColorStop(0.7,"blue");
        lg.addColorStop(0.8,"pink");
        lg.addColorStop(1,"purple");

        let mark=speed.toFixed(0)%3===1?".":(speed.toFixed(0)%3==2?"..":"...");
        ctx.textAlign="left";
        ctx.textBaseline="bottom";
        ctx.font="48px Arial";
        ctx.strokeStyle=lg;
        console.log(mark);
        ctx.strokeText("Loading"+mark,cans.width/3,cans.height);
        ctx.stroke();
        ctx.restore();
        speed+=0.1;
        if(speed>400)window.cancelAnimationFrame(stop);
    }
    draw();
</script>